<template>
  <div>
    <el-row type="flex" justify="center">
      <el-steps :space="200" :active="active" finish-status="success" style="width:600px;padding-left: 150px">
        <el-step title="第一步"></el-step>
        <el-step title="第二步"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
    </el-row>
    <el-row type="flex" justify="center">
      <div style="width: 650px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);background-color: white">
        <el-form v-if="active === 1" label-width="160px" style="margin-top: 40px" @submit.native="submit">
          <el-form-item label="IMAGE UPLOAD">
            <el-input v-model="form.image" style="width: 300px" placeholder="no file selected"></el-input>
            <el-button type="primary" @click="chooseImage">CHOOSE</el-button>
          </el-form-item>
          <el-form-item label="LABEL UPLOAD">
            <el-input v-model="form.label" placeholder="no file selected" style="width: 300px"></el-input>
            <el-button type="primary" @click="chooseLabel">CHOOSE</el-button>
          </el-form-item>
          <div style="padding-left: 40px;margin-bottom: 40px">
            <el-button @click="active = 2">RESET</el-button>
            <el-button type="primary" @click="submit">SUBMIT</el-button>
          </div>
        </el-form>
        <div v-if="active === 2" style="margin-top: 40px">
          <div style="margin: 0 40px;">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <el-checkbox-group v-model="checked" @change="handleCheckedFeaturesChange">
              <el-checkbox v-for="(f,i) in features" :label="f" :key="i" style="width: 150px;margin: 15px 0">{{f}}</el-checkbox>
            </el-checkbox-group>
          </div>
          <div style="padding-left: 40px;margin-bottom: 40px">
            <el-button @click="active = 1">RESET</el-button>
            <el-button type="primary" @click="submit">SUBMIT</el-button>
          </div>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "feature-extract",
    data(){
      return {
        active: 1,
        checkAll: false,
        isIndeterminate: false,
        checked: [],
        form: {
          image: '',
          label: ''
        },
        features: [
          'shape','glcm','firstorder',
          'glrlm','glszm','gldm',
          'ngtdm'
        ]
      }
    },
    methods: {
      handleCheckAllChange(val) {
        this.checked = val ? this.features : [];
        this.isIndeterminate = false;
      },
      handleCheckedFeaturesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.features.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.features.length;
      },
      chooseImage(){
        let form = document.getElementById('myform');
        form.elements['myfile'].click();
      },
      chooseLabel(){
        let form = document.getElementById('myform');
        form.elements['mylabel'].click();
      },
      submit(){
        let form = document.getElementById('myform');
        form.submit();
      }
    }
  }
</script>

<style scoped>

</style>
